<script setup>
import {logout, get} from '@/net'
import router from "@/router";
import {useStore} from '@/store'
import {reactive, ref} from "vue";
import {
  Back,
  Bell,
  ChatDotSquare, Collection, DataLine,
  Document, Files,
  Location, Lock, Message, Monitor,
  Notification, Operation,
  Position,
  School, Search,
  Umbrella, User
} from "@element-plus/icons-vue";

const loading = ref(true)
const store = useStore()
const searchInput = reactive({
  type: '1',
  text: ''
})
get('api/user/info', (data) => {
  // console.log(data)
  store.user = data
  // console.log(store.user)
  loading.value = false
})

function userLogout() {
  logout(() => router.push("/"))
}
</script>


<template>
  <div class="main-container" v-loading="loading" element-loading-text="正在加载，请稍等...">
    <el-container style="height: 100%" v-if="!loading">
      <el-header class="main-container-header">
        <el-image src="src/assets/logo.svg" class="logo" alt="logo"></el-image>
        <div style="flex: 1;padding: 0 20px;text-align: center">
          <el-input style="width: 100%;max-width: 500px" v-model="searchInput.text">
            <template #prefix>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
            <template #append>
              <el-select style="width: 100px" v-model="searchInput.type">
                <el-option value="1" label="帖子广场"></el-option>
                <el-option value="2" label="校园活动"></el-option>
                <el-option value="3" label="表白墙"></el-option>
                <el-option value="4" label="教务通知"></el-option>
              </el-select>
            </template>
          </el-input>
        </div>
        <div style="flex: 1" class="user-info">
          <div class="profile">
            <!--             用户名和邮箱-->
            <div>{{ store.user.username }}</div>
            <div>{{ store.user.email }}</div>
          </div>
          <!--           头像-->
          <el-dropdown>
            <el-avatar :src="store.getAvatarURL" icon="el-icon-user"></el-avatar>
            <template #dropdown>
              <el-dropdown-item>
                <el-icon>
                  <Operation/>
                </el-icon>
                <span>个人设置</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon>
                  <Message/>
                </el-icon>
                <span>消息通知</span>
              </el-dropdown-item>
              <el-dropdown-item divided @click="userLogout()">
                <el-icon>
                  <Back/>
                </el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </template>
          </el-dropdown>

        </div>
      </el-header>
      <el-container>
        <el-aside style="width: 230px">
          <el-scrollbar style="height: calc(100vh - 55px)">
            <el-menu style="min-height: calc(100vh - 55px)"
                     router
                     :default-active="$route.path"
                     :default-openeds="['1','2','3']"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <Location/>
                  </el-icon>
                  <span><b>校园论坛</b></span>
                </template>
                <el-menu-item index="/index">
                  <template #title>
                    <el-icon>
                      <ChatDotSquare/>
                    </el-icon>
                    帖子广场
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Bell/>
                    </el-icon>
                    失物招领
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Notification/>
                    </el-icon>
                    校园活动
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Umbrella/>
                    </el-icon>
                    表白墙
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <School/>
                    </el-icon>
                    海文考研
                    <el-tag style="margin-left: 10px" size="small">合作机构</el-tag>
                  </template>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon>
                    <Position/>
                  </el-icon>
                  <span><b>探索与发现</b></span>
                </template>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Document/>
                    </el-icon>
                    成绩查询
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Files/>
                    </el-icon>
                    班级课程表
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Monitor/>
                    </el-icon>
                    教务通知
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <Collection/>
                    </el-icon>
                    在线图书馆
                  </template>
                </el-menu-item>
                <el-menu-item>
                  <template #title>
                    <el-icon>
                      <DataLine/>
                    </el-icon>
                    预约教室
                  </template>
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <Operation/>
                  </el-icon>
                  <span><b>个人设置</b></span>
                </template>
                <el-menu-item index="/index/user-setting">
                  <template #title>
                    <el-icon>
                      <User/>
                    </el-icon>
                    个人信息设置
                  </template>
                </el-menu-item>
                <el-menu-item index="/index/privacy-setting">
                  <template #title>
                    <el-icon>
                      <Lock/>
                    </el-icon>
                    账号安全设置
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>

        </el-aside>
        <el-main class="main-content-page">
          <el-scrollbar style="height: calc(100vh - 55px)">
            <router-view v-slot="{Component}">
              <transition name="el-fade-in-linear" mode="out-in">
                <component :is="Component" style="height: 100%"></component>
              </transition>
            </router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style lang="less" scoped>

.main-content-page {
  padding: 0;
  background-color: #f7f8fa;
}

.dark .main-content-page {
  background-color: #242628;
}

.main-container-header {
  border-bottom: solid 1px var(--el-border-color);
  height: 55px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .logo {
    height: 32px;
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .el-avatar {
      cursor: pointer;
    }

    .profile {
      text-align: right;
      margin-right: 20px;

      :first-child {
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
      }

      :last-child {
        font-size: 10px;
        color: grey;
      }
    }
  }
}

.main-container {
  height: 100vh;
  width: 100vw;
}
</style>
